<template>
  <div class="history-main">
    <ul class="chart-list">
      <li class="chart"
          v-for="image in imageList"
          :key="image.name">
        <img :src="baseUrl+image.imageUrl"
             alt="">
        <p class='title'>{{image.name}}</p>
        <p class='icons'>
          <a :href="image.base64Url"
             :download="image.name+'.jpg'">
            <i class='el-icon-download'></i>
          </a>
          <i class="el-icon-delete-solid"
             @click="deleteImage(image.imageUrl)"></i>
        </p>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'historychart',
  data () {
    return {
      baseUrl: 'http://127.0.0.1:8001/',
      imageList: []
    }
  },
  beforeMount () {
    let self = this;
    self.getImageList();
  },
  methods: {
    deleteImage (image) {
      let self = this
      self.$confirm('确定删除所点击的图表吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        self.$ajax({
          method: 'POST',
          url: '/view/deleteImage/',
          dataType: 'json',
          data: {
            img: image
          }
        }).then(function (response) {
          console.log(response)
          self.getImageList();
          self.$message({
            message: '图表删除成功',
            type: 'success'
          })
        }).catch(function (err) {
          console.log(err)
        })
      }).catch(err => { console.log(err) })
    },
    getImageList () {
      let self = this
      self.$ajax({
        method: 'POST',
        url: '/view/getImageList/',
        dataType: 'json',
        data: {
          user: sessionStorage.getItem('name')
        }
      }).then(function (response) {
        self.imageList = response.data.imageList
        console.log(self.imageList)
      }).catch(function (err) {
        console.log(err)
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
.history-main
  width 100%
  height 100%
  background #fff
  overflow auto
  .chart-list
    margin 0
    padding 0
  .chart
    float left
    list-style none
    border 0.1rem solid #e6e6e6
    margin 0.1rem
    img
      display inline-block
      width 2.5rem
      height 1rem
    .title, .icons
      line-height 0.2rem
      width 100%
      height 0.3rem
      margin 0
      padding 0
      i.el-icon-download, i.el-icon-delete-solid
        display inline-block
        width 0.3rem !important
        line-height 0.3rem !important
        font-size 0.2rem
        cursor pointer
      i.el-icon-download:hover, i.el-icon-delete-solid:hover
        color #5cb6ff
      a
        color #2c3e50
  .chart:hover
    box-shadow 0.1rem 0.1rem 0.1rem #3689ff
    border 0.1rem solid #8cc5ff
</style>